<script setup lang="ts">
import { reactive, ref, watch } from 'vue';

import { message } from 'ant-design-vue';

import { getReuseChargeStandardApi } from '#/api';

const props = defineProps<{
  data?: any;
  open?: boolean;
  title?: string;
}>();

const emit = defineEmits(['update:open', 'handleClose', 'handleSave']);

const formRef = ref<any>(null);
const formState = reactive({
  beginUseDate: '',
  year: '',
  endUseDate: '',
  heatingStartDate: '',
  heatingEndDate: '',
  suspensionStartDate: '',
  suspensionEndDate: '',
  heatingDays: '',
  coolinStartDate: '',
  coolingEndDate: '',
  coolingDays: '',
  lateFeeStartDate: '',
  lateFeeEndDate: '',
});
const rules = {
  beginUseDate: [{ required: true, message: '请选择开始使用日期' }],
  year: [{ required: true, message: '请选择供暖年度' }],
  endUseDate: [{ required: true, message: '请选择结束使用日期' }],
  heatingStartDate: [{ required: true, message: '请选择供热开始日期' }],
  heatingEndDate: [{ required: true, message: '请选择供热结束日期' }],
  suspensionStartDate: [{ required: true, message: '请选择停供申请开始日期' }],
  suspensionEndDate: [{ required: true, message: '请选择停供申请结束日期' }],
  coolinStartDate: [{ required: true, message: '请选择制冷开始日期' }],
  coolingEndDate: [{ required: true, message: '请选择制冷结束日期' }],
  coolingDays: [{ required: true, message: '请输入制冷天数' }],
  lateFeeStartDate: [{ required: true, message: '请选择滞纳金开始日期' }],
  lateFeeEndDate: [{ required: true, message: '请选择滞纳金结束日期' }],
  heatingDays: [{ required: true, message: '请输入供热天数' }],
};
const labelCol = { style: { width: '130px' } };

const handleAfterOpenChange = (visible: boolean) => {
  emit('update:open', visible);
};

const handleClose = () => {
  emit('handleClose');
};

// 填充表单数据
const fillFormData = (data: any) => {
  if (!data || Object.keys(data).length === 0) return;

  // 基本信息
  Object.keys(formState).forEach((key: string) => {
    if (data[key] !== undefined) {
      (formState as any)[key] = data[key];
    }
  });
};

// 监听数据变化，填充表单
watch(
  () => props.data,
  (val) => {
    // console.log(val);
    if (val && Object.keys(val).length > 0) {
      fillFormData(val);
    }
  },
  { immediate: true, deep: true },
);

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value.validate();
    const params = {
      ...formState,
      jfbzID: props.data.jfbzID,
    };
    const res = await getReuseChargeStandardApi(params);
    if (res) {
      message.success('复用成功');
      emit('handleSave');
      handleClose();
    }
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};
</script>

<template>
  <a-drawer
    :open="props.open"
    :title="title || '复用计费规则'"
    placement="right"
    :width="1500"
    @after-open-change="handleAfterOpenChange"
    @close="handleClose"
    :footer-style="{ textAlign: 'right' }"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      layout="inline"
      :label-col="labelCol"
    >
      <a-form-item label="开始使用日期" name="beginUseDate">
        <a-date-picker
          v-model:value="formState.beginUseDate"
          placeholder="请选择开始使用日期"
          style="width: 200px"
          value-format="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item label="供暖年度" name="year">
        <a-input
          v-model:value="formState.year"
          placeholder="请输入供暖年度"
          type="number"
          style="width: 200px"
        />
      </a-form-item>
      <a-form-item label="结束使用日期" name="endUseDate">
        <a-date-picker
          v-model:value="formState.endUseDate"
          placeholder="请选择结束使用日期"
          style="width: 200px"
          value-format="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item label="供热开始日期" name="heatingStartDate">
        <a-date-picker
          v-model:value="formState.heatingStartDate"
          placeholder="请选择供热开始日期"
          style="width: 200px"
          value-format="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item label="供热结束日期" name="heatingEndDate">
        <a-date-picker
          v-model:value="formState.heatingEndDate"
          placeholder="请选择供热结束日期"
          style="width: 200px"
          value-format="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item label="供热天数" name="heatingDays">
        <a-input
          v-model:value="formState.heatingDays"
          style="width: 200px"
          placeholder="请输入供热天数"
        />
      </a-form-item>
      <a-form-item label="停供申请开始日期" name="suspensionStartDate">
        <a-date-picker
          v-model:value="formState.suspensionStartDate"
          placeholder="请选择停供申请开始日期"
          style="width: 200px"
          value-format="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item label="停供申请结束日期" name="suspensionEndDate">
        <a-date-picker
          v-model:value="formState.suspensionEndDate"
          placeholder="请选择停供申请结束日期"
          style="width: 200px"
          value-format="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item label="制冷开始日期" name="coolinStartDate">
        <a-date-picker
          v-model:value="formState.coolinStartDate"
          placeholder="请选择制冷开始日期"
          style="width: 200px"
          value-format="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item label="制冷结束日期" name="coolingEndDate">
        <a-date-picker
          v-model:value="formState.coolingEndDate"
          placeholder="请选择制冷结束日期"
          style="width: 200px"
          value-format="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item label="制冷天数" name="coolingDays">
        <a-input
          v-model:value="formState.coolingDays"
          style="width: 200px"
          placeholder="请输入制冷天数"
        />
      </a-form-item>
      <a-form-item
        label="滞纳金开始日期"
        name="lateFeeStartDate"
        v-if="props.data.lateFeeMethod !== '不收取滞纳金'"
      >
        <a-date-picker
          v-model:value="formState.lateFeeStartDate"
          placeholder="请选择滞纳金开始日期"
          style="width: 200px"
          value-format="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item
        label="滞纳金结束日期"
        name="lateFeeEndDate"
        v-if="props.data.lateFeeMethod !== '不收取滞纳金'"
      >
        <a-date-picker
          v-model:value="formState.lateFeeEndDate"
          placeholder="请选择滞纳金结束日期"
          style="width: 200px"
          value-format="YYYY-MM-DD"
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-space>
        <a-button @click="handleClose">取消</a-button>
        <a-button type="primary" @click="handleSubmit">确定</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<style scoped>
:deep(.ant-form-item) {
  margin-bottom: 20px !important;
}

:deep(.ant-drawer-footer) {
  text-align: right !important;
}
</style>
